li {
    --li-bg-color: hsl(216,35%,85%);
    --li-bg-color-lighter: hsl(216,35%,95%);
    --li-bg-color-darker: hsl(216,35%,80%);
    --li-color-lighter:blue;
}

.tabs {margin: 0; padding: 0;}
.tabs ul {list-style: none; margin: 0; padding: 0; height: 100%; vertical-align: middle;}
.tabs ul li {width: 100px; height: 30px; float:left; text-align: center; line-height: 30px; cursor: pointer; 
    vertical-align: middle;
    user-select: none;
    box-sizing: border-box;
}
.tabs ul li:hover {color: var(--li-color-lighter);}
/* .tabs ul li:active {background-color: var(--li-bg-color-lighter); color: var(--li-color-lighter);} */
.tab-default {background-color: var(--li-bg-color);}
.tab-selected {background-color: var(--li-bg-color-lighter); color: var(--li-color-lighter); border-top: 2px solid orange;}


.tab-menu {margin: 0; padding: 0;}
.tab-menu ul {list-style: none; width: 100%; height: 100%; text-align: center;
    margin: 0;
    padding: 0;
}
.tab-menu ul li {width: 100%; height: 100%; text-align: center; line-height: 40px; cursor: pointer;
    user-select: none;
    box-sizing: border-box;
    text-align: right;
    padding-right: 15px;
}
.tab-menu ul li:hover {color: #79bbff;}
.tab-menu-default {border-right: 1px solid #e4e7ed;}
.tab-menu-selected {border-right: 2px solid #79bbff; color: #79bbff; background-color: #e7eaed;}
